<script type="text/javascript">
    validaForm('formConfig_layout');
</script>
<script type="text/javascript" src="{$smarty.const.PASTA_JS_DEFAULT}farbtastic.js"></script>
<link rel="stylesheet" href="{$smarty.const.PASTA_CSS_DEFAULT}farbtastic.css" type="text/css" />
<style type="text/css" media="screen">
    .colorwell {
        border: 2px solid #fff;
        width: 6em;
        text-align: center;
        cursor: pointer;
    }
    body .colorwell-selected {
        border: 2px solid #000;
        font-weight: bold;
    }
</style>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#demo').hide();
        var f = $.farbtastic('#picker');
        var p = $('#picker').css('opacity', 0.50);
        var f2 = $.farbtastic('#picker2');
        var p2 = $('#picker2').css('opacity', 0.50);
        var f3 = $.farbtastic('#picker3');
        var p3 = $('#picker3').css('opacity', 0.50);
        var f4 = $.farbtastic('#picker4');
        var p4 = $('#picker4').css('opacity', 0.50);
        var selected;
        $('.colorwell')
                .each(function() {
            f.linkTo(this);
            f2.linkTo(this);
            f3.linkTo(this);
            f4.linkTo(this);
            $(this).css('opacity', 0.75);
        })
                .focus(function() {
            if (selected) {
                $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
            }
            f.linkTo(this);
            f2.linkTo(this);
            f3.linkTo(this);
            f4.linkTo(this);
            p.css('opacity', 1);
            p2.css('opacity', 1);
            p3.css('opacity', 1);
            p4.css('opacity', 1);
            $(selected = this).css('opacity', 1).addClass('colorwell-selected');
        });
    });
</script>
<div class="gridConteudo">
    {CHAMA_FUNCAO funcao="getCaminhoPastaBanco" classe="imprimiConteudo"}
    <form class="form-actions" name="formConfig_layout" id="formConfig_layout" action="{$URLEXECUTE}banco/executaPost.php{$PARAMS}" method="post" enctype="multipart/form-data">
        <h1 class="textoAlinhamentoCentro">CONFIGURAÇÕES VISUAIS</h1>
        <div class="divForm">
            <input style="display:none" type="text" name="tabela" id="tabela" value="tb_config_layout" />
            <input style="display:none" type="text" name="id" id="id" value="id_layout" />
            <input style="display:none" type="text" name="url" id="url" value="{$URLATUAL}" />
            <div class="span12 offset0 divBotoesCima">
                <center>
                    <button class="btn btn-personalizado" type="submit">Salvar</button>
                    <button class="btn btn-personalizado" type="button" onclick="window.location = '{$smarty.const.URL_ADMIN}'">Cancelar</button>
                </center>
            </div>
            <div class="span12 offset0"></div>
            {if $smarty.const.MSG}
                <div class="alert floatLeft width96percent {$smarty.const.TIPO_MSG}" align="center">
                    <button class="close" data-dismiss="alert" onClick="executaAjaxRetirandoGetMsg('$PARAM_FECHAR_MSG}')" type="button">x</button>
                    <strong>{$smarty.const.TITULO_MSG}</strong><br />
                    {$smarty.const.MSG}
                </div>
            {/if}
            <div class="row-fluid">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td> 
                                <h2>Criando o Visual do Portal</h2>
                                <label class="label-xxlarge" for="descricao">Nome do Layout:
                                    <input class="input-xxlarge" type="text" placeholder="Nome do layout" name="descricao" id="descricao"  value="{$descricao}"/>
                                </label>
                                <label class="label-fotoFile" for="altura_cabecalho">Altura do Cabeçalho:
                                    <input id="foto" placeholder="Altura Cabeçalho" type="text" name="altura_cabecalho" id="altura_cabecalho" value="{$altura_cabecalho}"/>
                                </label>
                                <label class="label-fotoFile" for="foto">Imagem do Cabeçalho:
                                    <input id="foto" placeholder="Foto" type="file" name="foto" id="foto"/>
                                </label>
                                {if $nome_foto}
                                    <label class="label-mini" for="delFoto">
                                        <a class="fancybox" rel="group" href="{$URL_IMG_SALVAS}{$nome_foto}">
                                            <img title="Clique para Ampliar" class="imgFile" src="{$URL_IMG_SALVAS}{$nome_foto}" id="fotoFile" alt="{$nome_foto}"/>
                                        </a>
                                    </label>
                                    <label class="label-large" for="delFoto">Excluir Imagem Cabecalho:
                                        <input class="input-mini" type="checkbox" id="delFoto" name="delFoto"/>
                                    </label>
                                {else}
                                    <label class="labelSemfoto" >Não há foto cadastrada...</label>
                                {/if}
                            </td>

                        </tr>
                        <tr>
                            <td> 
                                <h2>Cores da Estrutura</h2>
                                <label class="label-large" for="cor_fundo_portal">Cor de Fundo do Portal:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Fundo do Portal" name="cor_fundo_portal" id="cor_fundo_portal"  value="{$cor_fundo_portal}"/>
                                </label>
                                <div id="picker"  style="float: right;"></div>
                                <label class="label-large" for="cor_fundo_conteudo">Cor de Fundo do Conteudo:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Fundo do Conteudo" name="cor_fundo_conteudo" id="cor_fundo_conteudo"  value="{$cor_fundo_conteudo}"/>
                                </label>
                                <label class="label-large" for="cor_fundo_cabecalho">Cor de Fundo do Cabeçalho:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Fundo do Cabeçalho" name="cor_fundo_cabecalho" id="cor_fundo_cabecalho"  value="{$cor_fundo_cabecalho}"/>
                                </label>
                                <label class="label-large" for="cor_fundo_rodape">Cor de Fundo do Rodapé:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Fundo do Rodapé" name="cor_fundo_rodape" id="cor_fundo_rodape"  value="{$cor_fundo_rodape}"/>
                                </label>
                                <label class="label-medium" for="cor_menu">Cor do menu:
                                    <input class="input-medium colorwell" type="text"  name="cor_menu" id="cor_menu"  value="{$cor_menu}"/>
                                </label>
                                <label class="label-medium" for="cor_fundo_marcador">Cor do fundo Marcador:
                                    <input class="input-medium colorwell" type="text"  name="cor_fundo_marcador" id="cor_fundo_marcador"  value="{$cor_fundo_marcador}"/>
                                </label>
                                <label class="label-medium" for="cor_texto_marcador">Cor do Texto Marcador:
                                    <input class="input-medium colorwell" type="text"  name="cor_texto_marcador" id="cor_texto_marcador"  value="{$cor_texto_marcador}"/>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2>Cores dos botões</h2>
                                <label class="label-large" for="cor_botao_geral">Cor Principal do Botão:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor Principal do Botão" name="cor_botao_geral" id="cor_botao_geral"  value="{$cor_botao_geral}"/>
                                </label>

                                <label class="label-large" for="cor_botao_var_1">Cor Variação do Botão:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor Variação do Botão" name="cor_botao_var_1" id="cor_botao_var_1"  value="{$cor_botao_var_1}"/>
                                </label>
                                <div id="picker2"  style="float: right;"></div>
                                <label class="label-large" for="cor_botao_borda">Cor da Borda do Botão:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor da Borda do Botão" name="cor_botao_borda" id="cor_botao_borda"  value="{$cor_botao_borda}"/>
                                </label>

                                <label class="label-large" for="cor_botao_start">Cor Variação Inicial do Botão:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor Variação Inicial do Botão" name="cor_botao_start" id="cor_botao_start"  value="{$cor_botao_start}"/>
                                </label>

                                <label class="label-large" for="cor_botao_end">Cor Variação Final do Botão:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor Variação Final do Botão" name="cor_botao_end" id="cor_botao_end"  value="{$cor_botao_end}"/>
                                </label>

                                <label class="label-medium" for="cor_botao_hove">Cor de Botão Hove:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor Variação hove(Quando passa o mouse)" name="cor_botao_hove" id="cor_botao_hove"  value="{$cor_botao_hove}"/>
                                </label>


                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2>Cores de Menu</h2>
                                <label class="label-large" for="cor_menu_fundo">Cor do Fundo do Menu:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor do Fundo do Menu" name="cor_menu_fundo" id="cor_menu_fundo"  value="{$cor_menu_fundo}"/>
                                </label>

                                <label class="label-large" for="cor_menu_var_1">Cor de Variação do Menu:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Variação do Menu" name="cor_menu_var_1" id="cor_menu_var_1"  value="{$cor_menu_var_1}"/>
                                </label>

                                <label class="label-large" for="cor_menu_var_2">Cor de Variação 2 do Menu:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Variação 2 do Menu" name="cor_menu_var_2" id="cor_menu_var_2"  value="{$cor_menu_var_2}"/>
                                </label>

                                <div id="picker3"  style="float: right;"></div>
                                <label class="label-large" for="cor_menu_borda">Cor de Borda do Menu:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Borda do Menu" name="cor_menu_borda" id="cor_menu_borda"  value="{$cor_menu_borda}"/>
                                </label>
                                <label class="label-large" for="cor_menu_texto">Cor de Texto do Menu:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Texto do Menu" name="cor_menu_texto" id="cor_menu_texto"  value="{$cor_menu_texto}"/>
                                </label>

                                <label class="label-large" for="cor_menu_texto_hove">Cor de Texto do Menu Hove:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Texto do Menu Hove(Quando passa o mouse)" name="cor_menu_texto_hove" id="cor_menu_texto_hove"  value="{$cor_menu_texto_hove}"/>
                                </label>

                                <label class="label-large" for="cor_menu_selecionado">Cor de Menu Selecionado:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Menu Selecionado" name="cor_menu_selecionado" id="cor_menu_selecionado"  value="{$cor_menu_selecionado}"/>
                                </label>

                                <label class="label-xlarge" for="cor_menu_selecionado_texto">Cor de Texto do Menu Selecionado:
                                    <input class="input-medium colorwell" type="text" placeholder="Cor de Texto do Menu Selecionado" name="cor_menu_selecionado_texto" id="cor_menu_selecionado_texto"  value="{$cor_menu_selecionado_texto}"/>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h2>Cores de Títulos e Parágrafos</h2>
                                <label class="label-large" for="cor_h1">Cor Cabeçalho H1:
                                    <input class="input-medium colorwell" type="text" name="cor_h1" id="cor_h1"  value="{$cor_h1}"/>
                                </label>
                                <label class="label-large" for="cor_h2">Cor Cabeçalho H2:
                                    <input class="input-medium colorwell" type="text" name="cor_h2" id="cor_h2"  value="{$cor_h2}"/>
                                </label>
                                <div id="picker4"  style="float: right;"></div>
                                <div id="picker2"  style="float: right;"></div>
                                <label class="label-large" for="cor_h3">Cor Cabeçalho H3:
                                    <input class="input-medium colorwell" type="text" name="cor_h3" id="cor_h3"  value="{$cor_h3}"/>
                                </label>

                                <label class="label-large" for="cor_h4">Cor Cabeçalho H4:
                                    <input class="input-medium colorwell" type="text" name="cor_h4" id="cor_h4"  value="{$cor_h4}"/>
                                </label>
                                <label class="label-large" for="cor_h5">Cor Cabeçalho H5:
                                    <input class="input-medium colorwell" type="text" name="cor_h5" id="cor_h5"  value="{$cor_h5}"/>
                                </label>
                                <label class="label-mini" for="cor_label">Cor Label:
                                    <input class="input-large colorwell" type="text" name="cor_label" id="cor_label"  value="{$cor_label}"/>
                                </label>
                                <label class="label-medium" for="cor_paragrafo">Cor Parágrafo P:
                                    <input class="input-mini colorwell" type="text" name="cor_paragrafo" id="cor_paragrafo"  value="{$cor_paragrafo}"/>
                                </label>
                                <label class="label-large" for="cor_link_mapa">Cor Link Mapa Site no Rodapé:
                                    <input class="input-mini colorwell" type="text" name="cor_link_mapa" id="cor_link_mapa"  value="{$cor_link_mapa}"/>
                                </label>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="span12 offset0 divBotoesBaixo">
                <center>
                    <button class="btn btn-personalizado" type="submit">Salvar</button>
                    <button class="btn btn-personalizado" type="button" onclick="window.location = '{$smarty.const.URL_ADMIN}'">Cancelar</button>
                </center>
            </div>

        </div>
    </form>
</div>
